const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        abc:'./index.js'
    }
    , output: {
        path: path.join(__dirname, 'dist') //只能是绝对路径
        , filename: "bundle.js"
    }
    , mode:'development'
    , devtool: 'source-map'

    , devServer: {
        contentBase: path.join(__dirname, 'dist')
        , port: 8080
        , host: 'localhost'
        , compress: true
    }

    ,module:{
        rules:[
            {
                test:/\.(js)$/
                ,use:{
                    loader:'babel-loader'
                    ,options:{
                        plugins: [
                            /*
                                新 export default @connect(state=>state) class Hello
                                旧 ↓
                                @connect(state=>state)
                                export default class Hello
                            */
                            ["@babel/plugin-proposal-decorators", {legacy: true}] // https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html
                            , ['@babel/plugin-proposal-class-properties'/*, {loose: true}*/] //松散模式兼容性要差一点
                            ,[
                                '@babel/plugin-transform-runtime'
                                ,{
                                    "corejs":false //polyfill 置为3 然后安装依赖npm i @babel/runtime-corejs3 即可支持polyfill
                                    ,"helpers":true //工具方法 _classCallCheck ...
                                    ,"regenerator":true //模拟generator
                                    ,"useESModules":true //使用es6模块
                                }
                            ]
                        ]
                        ,presets:[
                            ["@babel/preset-env",{modules:true}] //默认modules为true,会将es6module转换成cmj,但如果你想使用基于es6module的Tree Shaking功能,需置为false ×
                            /*
                                Invariant Violation: [BABEL] D:\x\webpack_tutorial\12babel\src\index.js: Invalid Option: The 'modules' option must be one of
                                 - 'false' to indicate no module processing
                                 - a specific module type: 'commonjs', 'amd', 'umd', 'systemjs' - 'auto' (default) which will automatically select 'false' if the current
                            */
                            ,"@babel/preset-react"
                        ]
                    }
                }
                , exclude:/node_modules/ //会报 babel-runtime TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
                , include: path.resolve(__dirname, 'src')
            }
        ]
    }

    , plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            hash:true
        })
        , new CleanWebpackPlugin()
    ]
};
